<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
            this.state = {count: 1}
        }

        render() {
            return (
                <div className="app">
                    // 使用箭头函数函数的形式返回一个事件处理函数(高阶函数)
                    <button onClick={() => {this.addCount()}}>点击{this.state.count}</button>
                </div>
            );
        }

        // 箭头函数+赋值语句的形式定义事件处理方法
        addCount() {
            this.setState({
                count: this.state.count += 1
            })
        }
    }

    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>